﻿@page "/chart/smart-labels"

@using Syncfusion.Blazor
@using ThemeHelper
@using Syncfusion.Blazor.Charts

@inject NavigationManager NavigationManager
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample shows the gold medal count scored by each country at the Rio Olympic Games using the smart labels on the chart. The smart label positioning for a series can be shown if it contains more points.</p>
</SampleDescription>
<ActionDescription>
    <p>In this example, you can see how the labels can be arranged smartly without overlapping. You can use the <code>EnableSmartLabels</code> property to enable or disable the support.</p>
    <p><code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
    <p>More information on the smart labels can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/accumulation-chart/data-label/#smart-labels'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <SfAccumulationChart EnableBorderOnMouseMove="false" Title="Rio Olympics Gold" EnableSmartLabels="true" Theme="@Theme">
        <AccumulationChartLegendSettings Visible="false"></AccumulationChartLegendSettings>
        <AccumulationChartTooltipSettings Enable="true" Format="${point.x} : <b>${point.y}%</b>"></AccumulationChartTooltipSettings>
        <AccumulationChartSeriesCollection>
            <AccumulationChartSeries DataSource="@PieChartPoints" Name="RIO" XName="Country" YName="Medal" StartAngle="60" InnerRadius="0%">
                <AccumulationDataLabelSettings Name="DataLabelMappingName" Visible="true" Position="AccumulationLabelPosition.Outside">
                    <AccumulationChartConnector Length="20px" Type="ConnectorType.Curve"></AccumulationChartConnector>
                </AccumulationDataLabelSettings>
            </AccumulationChartSeries>
        </AccumulationChartSeriesCollection>
    </SfAccumulationChart>
</div>

@code{

    private Theme Theme { get; set; }
    public List<PieData> PieChartPoints { get; set; } = new List<PieData>
    {
        new PieData { Country = "USA", Medal = 46, DataLabelMappingName = "United States of America: 46" },
        new PieData { Country = "China", Medal = 26, DataLabelMappingName = "China: 26" },
        new PieData { Country = "Russia", Medal = 19, DataLabelMappingName = "Russia: 19" },
        new PieData { Country = "Germany", Medal = 17, DataLabelMappingName = "Germany: 17" },
        new PieData { Country = "Japan", Medal = 12, DataLabelMappingName = "Japan: 12"  },
        new PieData { Country = "France", Medal = 10, DataLabelMappingName = "France: 10" },
        new PieData { Country = "South Korea", Medal = 9, DataLabelMappingName = "South Korea: 9" },
        new PieData { Country = "Great Britain", Medal = 27, DataLabelMappingName = "Great Britain: 27" },
        new PieData { Country = "Italy", Medal = 8, DataLabelMappingName = "Italy: 8" },
        new PieData { Country = "Australia", Medal = 8, DataLabelMappingName = "Australia: 8" },
        new PieData { Country = "Netherlands", Medal = 8, DataLabelMappingName = "Netherlands: 8" },
        new PieData { Country = "NewZealand", Medal = 4, DataLabelMappingName = "New Zealand: 4" },
        new PieData { Country = "Uzbekistan", Medal = 4, DataLabelMappingName = "Uzbekistan: 4" },
        new PieData { Country = "Kazakhstan", Medal = 3, DataLabelMappingName = "Kazakhstan: 3" },
        new PieData { Country = "Colombia", Medal = 3, DataLabelMappingName = "Colombia: 3" },
        new PieData { Country = "Switzerland", Medal = 3, DataLabelMappingName = "Switzerland: 3" },
        new PieData { Country = "Argentina", Medal = 3, DataLabelMappingName = "Argentina: 3" },
        new PieData { Country = "South Africa", Medal = 2, DataLabelMappingName = "South Africa: 2" },
        new PieData { Country = "North Korea", Medal = 2, DataLabelMappingName = "North Korea: 2" },
    };

    protected override void OnInitialized()
    {
        Theme = ThemeHelper.GetCurrentTheme(NavigationManager.Uri);
    }

    public class PieData
    {
        public string Country { get; set; }
        public double Medal { get; set; }
        public string DataLabelMappingName { get; set; }
    }
}
